<template>
  <div
    class="min-h-screen bg-bg-color w-full overflow-hidden text-xs text-white lg:pb-0"
    :class="{ 'pb-16': isH5HavePadding() }">
    <div class="box-border px-3.5 lg:mx-auto lg:w-100">
      <CommonHead />
      <div class="mt-small overflow-hidden lg:mt-big">
        <nuxt-page />
      </div>
    </div>
    <NewHomeFoot />
  </div>
</template>

<script setup lang="ts">
import CommonHead from '~/components/basis/CommonHead.vue'
import CommonFoot from '~/components/basis/CommonFoot.vue'
import { useMetaStore } from '~/store/meta'
import NewHomeFoot from '~/components/home/NewHomeFoot.vue'
import { useCategoryStore } from '~/store/category'
import { useGlobalRichSeo } from '~/composables/useTdk'

const localePath = useLocalePath()
const route = useRoute()
const metaStore = useMetaStore()
const categoryStore = useCategoryStore()
await useLazyAsyncData(async () => {
  await Promise.all([categoryStore.initCategoryTree()])
  return 1
})
const { $mt } = useCommonPlugin()
if (process.server) {
  const i18nHead = useLocaleHead({
    addSeoAttributes: {},
  })
  i18nHead.value.link.find((item) => {
    if (!item.href) return
    item.href = `https://bittopup.com${item.href}`
  })
  const ogUrl = i18nHead.value.meta.find((item) => item.property === 'og:url')
  ogUrl && (ogUrl.content = `https://bittopup.com${route.fullPath}`)
  useHead({
    htmlAttrs: {
      lang: i18nHead.value.htmlAttrs!.lang,
    },
    link: [...(i18nHead.value.link || [])],
    meta: [...(i18nHead.value.meta || [])],
  })
  useSeoMeta({
    title: `BitTopup - ${$mt('Game Top-Up, Gift Card')} | ${$mt('Game Voucher & Mobile Recharge')}`,
    ogTitle: `BitTopup - ${$mt('Game Top-Up, Gift Card')} | ${$mt('Game Voucher & Mobile Recharge')}`,
    description: $mt(
      'Top up PUBG Mobile, Honor of Kings, Genshin Impact, Poppo Live, Bigo Live, and Likee with BitTopup. Fast, secure, and easy! Click now to recharge and enhance your gaming and streaming experience.',
    ),
    ogDescription: $mt(
      'Top up PUBG Mobile, Honor of Kings, Genshin Impact, Poppo Live, Bigo Live, and Likee with BitTopup. Fast, secure, and easy! Click now to recharge and enhance your gaming and streaming experience.',
    ),
    ogImage: 'https://bittopup.com/logo.png',
    twitterCard: 'summary_large_image',
  })
  useGlobalRichSeo()
}

const isH5HavePadding = () => {
  return route.path === localePath('/user') || /\/category\//.test(route.path)
}
</script>

<style lang="scss"></style>
